import React, {Component} from 'react';
import './Proposal.scss';

import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import InputAdornment from '@material-ui/core/InputAdornment';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import ListItemText from '@material-ui/core/ListItemText';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List';
import Picker from 'better-picker'


import datas from '../json/data.json'
import drug from '../json/drug.json'

class Proposal extends Component {
    state={
        userInfo:{},
        chipData: [],
        diseaseDatas:[],
        diseasescs:[],
        isShowDiseaseLise:true,
        disVal:'',
        showconsultPrice:'$20',
        openConsultPriceDialog: false,
        consultPrice:['免费','$20','$30','$50','$100'],
        userInputPriceEd:'',
        conPriceActive:1,
        openAddDrug:false,
        takeType:['内服','外用'],
        taketypeIndex:0,
        data1num: "5",
        data2num: '1',
        data3num: '1',
        data4num: '2',
        takeTypeShow:1,
        YiZhu:'必填',
        openYiZhu:false,
        taboos: ['忌辛辣', '忌油腻', '忌生冷', '忌烟酒', '忌发物', '忌荤腥', '忌酸涩', '忌刺激性食物', '忌敏性食物', '忌难消化食物', '备孕禁服', '怀孕禁服', '经期停服', '感冒停服', '忌与西药同服'],
        taTime: ['饭前一小时', '饭后一小时', '空腹服', '晨起服'],
        tabTimeIndex:0,
        taboosIndex:0,
        tabooactive: [],
        isShow: '不可见',//购药前处方是否可见
        PrescriptionDialogIsShow:false,
        keyboardEn1: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
        keyboardEn2: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
        keyboardEn3: ["Z", "X", "C", "V", "B", "N", "M"],
        isShowKeyBoardEn:true,
        drugunitNum:'',
        isShowListJp:true,
        drugListChoose:[],
        isShowDrugChoose:false,
        drugNameJpShow:[],//选中进容器的药材
        openTose:false,
        openType:false,
        typeListIndex:0,
        typeLists: ['无', '先煎', '后下', '烊化', '包煎', '另煎(炖)', '研末', '分冲', '研末包煎', '捣碎'],
        drugChooseType:0
    }
    handleDelete = data => () => {
        if (data.label === 'React') {
            alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
            return;
        }
    
        this.setState(state => {
            const chipData = [...state.chipData];
            const chipToDelete = chipData.indexOf(data);
            chipData.splice(chipToDelete, 1);
            return { chipData };
        });
    };
    getDisease = () => {
        fetch('./json/disease.json').then((response) => {
            response.json().then((data) => {
               this.setState({
                    diseaseDatas:data
               })
            })
        }).catch((error) => {
            alert(error)
        })
    }
    onSeachDiseaseChange = (e) =>{
        console.log(e.target.value)
        let userInput = e.target.value.toUpperCase();
        this.setState({
            disVal:userInput
        })
        let [arrCh, arrEn, arrFinal] = [[], [], []];
        this.state.diseaseDatas.forEach((item) => {
            arrCh.push(item.name.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, "").indexOf(userInput))
            arrEn.push(item.name_spell.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, "").indexOf(userInput))
        })
        arrCh.forEach((item, index) => {
            if (arrCh[index] !== -1) {// 如果是用户输入的是中文 
                arrFinal.push({ name: this.state.diseaseDatas[index].name.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, ""), id: this.state.diseaseDatas[index].id })
            } else if (arrEn[index] !== -1) {//如果用户输入的是英文
                arrFinal.push({ name: this.state.diseaseDatas[index].name.replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, ""), id: this.state.diseaseDatas[index].id })
            }
        })
        if(!userInput){
            this.setState({
                diseasescs:[]
            })
        }else{
            this.setState({
                isShowDiseaseLise:true,
                diseasescs:arrFinal
            })

        }
    }
    
    onChooseDiseae = (val) => {
        let x = [...this.state.chipData,val];
            x =  Array.from(new Set(x));
        this.setState({
            chipData:x,
            isShowDiseaseLise:false,
            disVal:''
        })
        this.refs.disinput.focus()
    }
    onOpenConsultPriceDialog = (val) => {
        this.setState({
            openConsultPriceDialog:true
        })
    }
    handleCloseConsultPriceDialog = () => {
        this.setState({
            openConsultPriceDialog:false
        })
    }
    onchooseConsultPriceEd = (item,index) => {
        this.setState({
            showconsultPrice:item,
            conPriceActive:index
        })
    }
    userInputPrice = (e) => {
        this.setState({
            userInputPriceEd:e.target.value,
            showconsultPrice:'$'+e.target.value
        })
    }
    goToAddDrug = () => {
        console.log("添加方案")
        console.log(drug)
        // let param = new FormData();
        // param.append('sId', 159101);
        // fetch('http://w.71cp.com/doctor_ajax.php?do=getDrugBySup', {
        //     method: 'POST',
        //     body: param
        // }).then((response) => {
        //     response.json().then((data) => {
        //         console.log(data)
        //         if ( data.code === 1 ){
                  
        //         }else{
        //             console.log(data.msg)
        //         }
        //     })
        // }).catch((error) => {
        //     alert(error)
        // })
        this.setState({
            openAddDrug:true
        })
    }
    handleCloseAddDrug = () => {
        this.setState({
            openAddDrug:false
        })
    }

    onChooseTakeType = (index) => {
        console.log("选择服用方式")
        this.setState({
            taketypeIndex:index,
            takeTypeShow:!index,
        })
    }
    picker = () => {
        let picker = new Picker({
            data: [datas.data1, datas.data2, datas.data3, datas.data4],
            selectedIndex: [4, 0, 0, 1],
            title: '贴数'
        });
        picker.on('picker.select', (selectedVal, selectedIndex) => {
            this.setState({
                data1num:datas.data1[selectedIndex[0]].text.replace(/[^0-9]/ig, ""),
                data2num:datas.data2[selectedIndex[1]].text.replace(/[^0-9]/ig, ""),
                data3num:datas.data3[selectedIndex[2]].text.replace(/[^0-9]/ig, ""),
                data4num:datas.data4[selectedIndex[3]].text.replace(/[^0-9]/ig, "")
            })
        })
        picker.show();
    }
    onOpenYiZhuDialog = () => {
        this.setState({
            openYiZhu:true
        })
    }
    handleCloseYiZhu =() => {
        this.setState({
            openYiZhu:false
        })
    }
    onChooseTime = (val,index) => {
        this.setState({
            tabTimeIndex:index
        })
    }
    addTabooas = () => {
        this.setState({
            tabooactive:this.state.taboos.map(item => {
                return false;
            })
        })
    }
    addTaboo = (item,index) => {
        let arr =  this.state.tabooactive;
        if(arr[index]){
            arr[index] = false;
            this.setState({
                tabooactive:arr
            })
        }else{
            arr[index] = true;
            this.setState({
                tabooactive:arr
            })
        }
    }
    onOpenPrescriptionDialog = () => {
        console.log("ddd")
        this.setState({
            PrescriptionDialogIsShow:true
        })
    }
    handlePrescriptionListItemClick = (val) => {
        this.setState({
            PrescriptionDialogIsShow:false,
            isShow:val
        })
    }
    
    onClickEnKeboard = (val) => {
        this.setState({
            drugunitNum:this.state.drugunitNum + val,
            isShowListJp:false,
            isShowDrugChoose:true
        },() => {
            this.drutMatching(this.state.drugunitNum)
        })

    
    }
    deleteInputEn = () => {
        this.setState({
            drugunitNum:this.state.drugunitNum.substring(0,this.state.drugunitNum.length - 1),
        },() => {
            this.drutMatching(this.state.drugunitNum)
        })
        
        if(this.state.drugunitNum.length === 1){
            this.setState({
                isShowListJp : true,
                isShowDrugChoose:false
            })
        }
    }
     // 药品的模糊匹配
    drutMatching = (val) => {
        let [arrEn, arrFinal] = [[], []];
            drug.forEach(item => {
                arrEn.push(item.smple_code.indexOf(val.toLowerCase()))
            })
            drug.forEach((item, index) => {
                if (arrEn[index] !== -1) {
                    arrFinal.push({
                        drugName: item.name,
                        unit: item.unit,
                        drug_id: item.id,
                        type: item.type
                    });
                }
            })
            console.log(arrFinal)
            this.setState({
                drugListChoose:arrFinal
            })
    }
    onChooseDrugOk = (val) => {
        let arr = this.state.drugNameJpShow;
        if(arr.length){
            let arred = []
            arr.forEach((item) =>{
                arred.push(item.name)
            })
            let index = arred.indexOf(val.drugName)
            if(index === -1){
                arr.push({
                    name:val.drugName,
                    type:''
                });
                this.setState({
                    drugNameJpShow:arr,
                    drugunitNum:'',
                    isShowDrugChoose:false,
                    isShowListJp:true
                })
            }else{
                this.setState({ 
                    openTose: true,
                });
            }
        }else{
            arr.push({
                name:val.drugName,
                type:''
            });
            this.setState({
                drugNameJpShow:arr,
                drugunitNum:'',
                isShowDrugChoose:false,
                isShowListJp:true
            })
        }
    }
    handleCloseTose = () => {
        this.setState({ 
            openTose: false,
            drugunitNum:'',
            isShowListJp:true,
            isShowDrugChoose:false,
        });
    };
    onChooseType = (index) => {
        console.log("选择煎法")
        this.setState({
            openType:true,
            drugChooseType:index
        })
    }
    handleCloseType = () => {
        this.setState({
            openType:false
        })
    }
    onChooseTypeList = (index,item) => {
        console.log(index,item)
        let arr = this.state.drugNameJpShow
        console.log(arr)
        arr[this.state.drugChooseType].type=item
        this.setState({
            typeListIndex:index,
            drugNameJpShow:arr
        })
    }
   
    componentWillMount() {
        let x =  localStorage.getItem('chooseUser')
        this.setState({
            userInfo:JSON.parse(x)
        })
        this.getDisease()
        this.addTabooas();
    }

    render() {

        const consultPrice = {
            marginRight: '10px',
            marginBottom:'10px'
        }
        const drugAppBar = {
            position:'relative'
        }
        const drugAppBarSwiper = {
            flex:1,
            textAlign:'center'
        }
        const goback = {
            paddingLeft:'5px',
            justifyContent: 'flex-start',
        }
        const storeDrug = {
            paddingRight:'5px',
            justifyContent: 'flex-end',
        }
        const taTimeItem = {
            marginBottom:'10px',
            marginRight:'10px'
        }
        const margintop = {
            marginBottom:'10px'
        }
        const paddingLeft30 = {
            paddingLeft:'30px'
        }
        const backf = {
            background:'#f8f8f8',
            padding:'10px'
        }
        const flex1 = {
            flex:1,
            background:'#f8f8f8'
        }

        const typeListB = {
            marginRight:'10px',
            marginBottom:'10px',
            minWidth:'115px'
        }
        const flexCenter = {
            display:"flex",
            textAlign:'center',
            justifyContent:'center'
        }
        const takeType = this.state.takeType.map((item,index) => {
            return (
                <Button 
                    key = {index}
                    variant = "contained"   
                    color = {this.state.taketypeIndex === index ? 'secondary' : 'inherit'}
                    onClick = {this.onChooseTakeType.bind(this,index)}
                    className = "userinfo marginLeft">
                    {item}
                </Button>
            )
        })

        return (
            <div className="Proposal" >
                <Grid container spacing={0} className="gridline">
                    <Grid item xs={2}>
                    <Typography variant="body2" color="inherit" className="usertitle" >
                        用户：
                    </Typography>
                    </Grid>
                    <Grid item xs={3}>
                        <Button variant="contained"   color="primary" className="userinfo">
                            {this.state.userInfo.usename}
                        </Button>
                    </Grid>
                    <Grid item xs={3}>
                        <Button variant="contained"   color="primary"  className="userinfo">
                            {this.state.userInfo.sex2}
                        </Button>
                    </Grid>
                    <Grid item xs={3}>
                        <Button variant="contained"   color="primary"  className="userinfo">
                            {this.state.userInfo.age}
                        </Button>
                    </Grid>
                </Grid>
                <Divider />

                {
                    this.state.chipData.length?(
                        <div>
                            <Paper className="diseaseChList">
                                {this.state.chipData.map((data,index) => {
                                    let avatar = null;
                                    return (
                                        <Chip
                                        className="diseaseLise"
                                        key={index}
                                        avatar={avatar}
                                        label={data.name}
                                        onDelete={this.handleDelete(data)}
                                        />
                                    );
                                })}
                            </Paper>
                            <Divider />
                        </div>
                    ):null
                }
                
                <div className="seach_disease">
                    <div>
                        <input type="text" 
                        placeholder="请输入病症名" 
                        onChange={this.onSeachDiseaseChange.bind(this)}
                        value={this.state.disVal}
                        ref="disinput"
                        />
                    </div>
 
                    {
                        this.state.isShowDiseaseLise?(
                            <ul className="disease_lists">
                                {
                                    this.state.diseasescs.map((item,index)=>{
                                        return (
                                            <li key={item.id} onClick={this.onChooseDiseae.bind(this,item)}>{item.name}</li>
                                        )
                                    })
                                }
                            </ul>
                        ):null
                    }
                 
                </div>
                <Divider />

                <Grid container spacing={0} 
                    className="gridline paddingRight" 
                    onClick={this.onOpenConsultPriceDialog.bind(this,this.state.showconsultPrice)}>
                    <Grid item xs={4}>
                        <Typography variant="body2" color="inherit" className="usertitle" >
                            方案补充收费：
                        </Typography>
                    </Grid>
                    <Grid item xs={8} className="textRight">
                        <Button variant="contained"   color="inherit"  className="userinfo backfff">
                            {this.state.showconsultPrice}
                            <Icon >keyboard_arrow_right</Icon>
                        </Button>
                    </Grid>
                </Grid>

                <Dialog
                    open={this.state.openConsultPriceDialog}
                    onClose={this.handleCloseConsultPriceDialog}
                    aria-labelledby="form-dialog-title"
                    >
                    <DialogTitle id="form-dialog-title">方案补充收费</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            {this.state.consultPrice.map((item,index)=>{
                                return (
                                    <Button variant="contained"   
                                        color={this.state.conPriceActive===index?"secondary":"inherit"}
                                        key={index} 
                                        onClick={this.onchooseConsultPriceEd.bind(this,item,index)}
                                        style={consultPrice}>
                                        {item}
                                    </Button>
                                )
                            })}
                        </DialogContentText>
                        <TextField
                            margin="dense"
                            id="name"
                            label="请输入自定义金额"
                            type="number"
                            fullWidth
                            value={this.state.userInputPriceEd}
                            onChange={this.userInputPrice.bind(this)}
                            InputProps={{
                                startAdornment: <InputAdornment position="start">$</InputAdornment>,
                              }}
                            />
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleCloseConsultPriceDialog.bind(this)} color="primary">
                            确定
                        </Button>
                    </DialogActions>
                    </Dialog>
                <Divider />

                <Grid container spacing={0} className="gridline paddingRight" >
                    <Grid item xs={4}>
                        <Typography variant="body2" color="inherit" className="usertitle" >
                            用药建议：
                        </Typography>
                    </Grid>
                    <Grid item xs={8} className="textRight">
                        <Button variant="contained"   color="inherit"  className="userinfo backfff">
                            保存为经验方
                        </Button>
                    </Grid>
                </Grid>
                <Divider />

                <Grid container spacing={0} className="gridline paddingRight" >
                    <Grid item xs={12} className="">
                        <Button variant="contained"   
                        color="secondary"
                        onClick={this.goToAddDrug.bind(this)}  
                        >
                            添加方案
                        </Button>
                    </Grid>
                </Grid>
                <Divider />
                {
                    this.state.drugNameJpShow.length > 0 ? (
                        <div className="paddingright">
                            <Paper style = {backf} className="paperwrap">
                                {this.state.drugNameJpShow.map((data,index) => {
                                    return (
                                        <Chip
                                            key={index}
                                            avatar={<div className="flexCenter" >{data.type}</div>}
                                            label={data.name}
                                            onDelete={this.handleDelete(data)}
                                            />
                                    );
                                })}
                                
                            </Paper>
                        </div>

                    ):null
                }
                

                <Dialog
                    fullScreen
                    // style = {backf}
                    open = {this.state.openAddDrug}
                    onClose={this.handleCloseAddDrug}
                    // TransitionComponent={Transition}
                    >
                    <AppBar style={drugAppBar}>
                        <Toolbar>
                            <Typography variant="title" color="inherit" style={drugAppBarSwiper}>
                                添加方案
                            </Typography>
                        <Button color="inherit" 
                            onClick={this.handleCloseAddDrug.bind(this)}
                            style = {storeDrug}
                            >
                                保存
                        </Button>
                        </Toolbar>
                    </AppBar>
                    <div style = {flex1} >
                        <Paper style = {backf} className="paperwrap">
                            {this.state.drugNameJpShow.map((data,index) => {
                                // let avatar = <div style={flexCenter}>dddd</div>;
                                return (
                                    <Chip
                                        key={index}
                                        avatar={<div className="flexCenter" >{data.type}</div>}
                                        label={data.name}
                                        onClick = {this.onChooseType.bind(this,index)}
                                        onDelete={this.handleDelete(data)}
                                        />
                                );
                            })}
                            <Dialog
                                open={this.state.openType}
                                onClose={this.handleCloseType}
                                aria-labelledby="alert-dialog-title"
                                aria-describedby="alert-dialog-description"
                                >
                                <DialogTitle id="alert-dialog-title">{"请选择煎法"}</DialogTitle>
                                <DialogContent >
                                    <Grid container  spacing={16}>
                                        <Grid item xs={12}>
                                            {
                                                this.state.typeLists.map((item,index) => {
                                                    return (
                                                        <Button 
                                                            variant="contained" 
                                                            key = {index} 
                                                            color={this.state.typeListIndex === index?'secondary':'primary'}
                                                            onClick = {this.onChooseTypeList.bind(this,index,item)}
                                                            style={typeListB}>
                                                                {item}
                                                        </Button>
                                                    )
                                                })
                                            }
                                            
                                        </Grid>
                                    </Grid>
                                </DialogContent>
                                <DialogActions>
                                    
                                    <Button onClick={this.handleCloseType} color="primary" autoFocus>
                                        确定
                                    </Button>
                                </DialogActions>
                            </Dialog>
                            <div className="inlineflex">
                                <span>{this.state.drugunitNum}</span>
                                <span className="custom_cuisor"></span>
                                {
                                    this.state.isShowListJp ? (
                                        <span className="plshujP">请输入药材简拼</span>
                                    ):null
                                }
                            </div>
                        </Paper>
                        {
                            this.state.isShowKeyBoardEn ? (
                                <div>
                                    {
                                        this.state.isShowDrugChoose ? (
                                            <Grid container   className="drugLis" spacing={8}>
                                                <Grid  className="overflowx" item>
                                                    {
                                                        this.state.drugListChoose.map((item,index)=>{
                                                            return (
                                                                <Paper key={index} onClick={this.onChooseDrugOk.bind(this,item)}>
                                                                    <span>{item.drugName}</span>
                                                                </Paper>
                                                            )
                                                        })
                                                    }
                                                </Grid >
                                            </Grid >
                                        ):null
                                    }
                                    <div className="keyboardEn">
                                        <Grid container spacing={8} className="keyboardEn1">
                                            {
                                                this.state.keyboardEn1.map((item,index)=>{
                                                    return (
                                                        <Grid item xs key={index} onClick={this.onClickEnKeboard.bind(this,item)}>
                                                            <Paper >{item}</Paper>
                                                        </Grid>
                                                    )
                                                })
                                            }
                                            
                                        </Grid>
                                        <Grid container spacing={8} className="keyboardEn2">
                                            {
                                                this.state.keyboardEn2.map((item,index)=>{
                                                    return (
                                                        <Grid item xs  key={index} onClick={this.onClickEnKeboard.bind(this,item)}>
                                                            <Paper >{item}</Paper>
                                                        </Grid>
                                                    )
                                                })
                                            }
                                            
                                        </Grid>
                                        <Grid container spacing={8} className="keyboardEn1">
                                            <Grid item xs>
                                                <Paper >
                                                    <Icon >keyboard_hide</Icon>
                                                </Paper>
                                            </Grid>
                                            {
                                                this.state.keyboardEn3.map((item,index)=>{
                                                    return (
                                                        <Grid item xs  key={index} onClick={this.onClickEnKeboard.bind(this,item)}>
                                                            <Paper >{item}</Paper>
                                                        </Grid>
                                                    )
                                                })
                                            }
                                            <Grid item xs>
                                                <Paper onClick={this.deleteInputEn.bind(this)}>
                                                    <Icon >backspace</Icon>
                                                </Paper>
                                            </Grid>
                                        </Grid>
                                    </div>
                                </div>
                            ):null
                        }
                       
                    </div>

                    <Dialog
                        open={this.state.openTose}
                        // TransitionComponent={Transition}
                        keepMounted
                        onClose={this.handleCloseTose}
                        aria-labelledby="alert-dialog-slide-title"
                        aria-describedby="alert-dialog-slide-description"
                        >
                        <DialogTitle id="alert-dialog-slide-title">
                            {"警告"}
                        </DialogTitle>
                        <DialogContent>
                            <DialogContentText id="alert-dialog-slide-description">
                            药方里已经有这味药啦！
                            </DialogContentText>
                        </DialogContent>
                        <DialogActions>
                            
                            <Button onClick={this.handleCloseTose} color="primary">
                            确定
                            </Button>
                        </DialogActions>
                        </Dialog>
                </Dialog>

                <Grid container spacing={0} className="gridline paddingRight" >
                    <Grid item xs={3}>
                        <Typography variant="body2" color="inherit" className="usertitle" >
                            用药建议：
                        </Typography>
                    </Grid>
                    <Grid item xs={9} className="takeType">
                        {takeType}
                    </Grid>
                </Grid>
                <Divider />
                {
                    this.state.takeTypeShow?(
                        <div>
                            <Grid container spacing={0} className="wrapnum">
                                <Grid item xs={1}>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        共
                                    </Typography>
                                </Grid>
                                <Grid item xs onClick={this.picker.bind(this)}>
                                    <Button variant="contained" color="secondary" className="padding0">
                                        {this.state.data1num}
                                        <Icon>keyboard_arrow_down</Icon>
                                    </Button>
                                </Grid>
                                <Grid item  xs={1}>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        贴，
                                    </Typography>
                                </Grid>
                                <Grid item xs onClick={this.picker.bind(this)}>
                                    <Button variant="contained" color="secondary"  className="padding0">
                                        {this.state.data2num}
                                        <Icon>keyboard_arrow_down</Icon>
                                    </Button>
                                </Grid>
                                <Grid item  xs={1}>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        日
                                    </Typography>
                                </Grid>
                                <Grid item xs onClick={this.picker.bind(this)}>
                                    <Button variant="contained" color="secondary"  className="padding0">
                                        {this.state.data3num}
                                        <Icon>keyboard_arrow_down</Icon>
                                    </Button>
                                </Grid>
                                <Grid item xs>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        贴，分
                                    </Typography>
                                </Grid>
                                <Grid item xs onClick={this.picker.bind(this)}>
                                    <Button variant="contained" color="secondary"  className="padding0">
                                        {this.state.data4num}
                                        <Icon>keyboard_arrow_down</Icon>
                                    </Button>
                                </Grid>
                                <Grid item xs>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        次服用
                                    </Typography>
                                </Grid>
                            </Grid>
                            <Divider />
                        </div>
                    ):(
                        <TextField
                            className="fullwithinput"
                            // id="multiline-static"
                            label="请输入用法"
                            multiline
                            fullWidth
                            rows="2"
                            margin="normal"
                        />  
                    )
                }

                <Grid container spacing={0} 
                    className="gridline paddingRight" 
                    onClick={this.onOpenYiZhuDialog.bind(this)}>
                    <Grid item xs={4}>
                        <Typography variant="body2" color="inherit" className="usertitle" >
                            医嘱
                        </Typography>
                    </Grid>
                    <Grid item xs={8} className="textRight">
                        <Button variant="contained"   color="inherit"  className="userinfo backfff">
                            {this.state.YiZhu}
                            <Icon >keyboard_arrow_right</Icon>
                        </Button>
                    </Grid>
                </Grid>
                <Divider />
                <Dialog
                    fullScreen
                    open = {this.state.openYiZhu}
                    onClose={this.handleCloseYiZhu}
                    // TransitionComponent={Transition}
                    >
                    <AppBar style={drugAppBar}>
                        <Toolbar>
                            <Button color="inherit" 
                                onClick={this.handleCloseYiZhu.bind(this)}
                                style = {goback}
                                >
                                    返回
                            </Button>
                            <Typography variant="title" color="inherit" style={drugAppBarSwiper}>
                                医嘱 
                            </Typography>
                            <Button color="inherit" 
                                onClick={this.handleCloseYiZhu.bind(this)}
                                style = {storeDrug}
                                >
                                    保存
                            </Button>
                        </Toolbar>
                    </AppBar>
                    <List>
                        <ListItem >
                            <Grid container spacing={0} 
                                className="gridline paddingRight" 
                                >
                                <Grid item xs={12} style={margintop}>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        用药时间
                                    </Typography>
                                </Grid>
                                <Grid item xs >
                                    {this.state.taTime.map((item,index)=>{
                                        return (
                                            <Button 
                                                key={index} 
                                                variant="contained"  
                                                color={this.state.tabTimeIndex===index?'secondary':'primary'} 
                                                onClick={this.onChooseTime.bind(this,item,index)}
                                                style={taTimeItem}>
                                                {item}
                                            </Button>
                                        )
                                    })}

                                </Grid>
                            </Grid>
                        </ListItem>
                        <Divider />
                        <ListItem >
                            <Grid container spacing={0} 
                                className="gridline paddingRight" 
                                >
                                <Grid item xs={12} style={margintop}>
                                    <Typography variant="body2" color="inherit" className="usertitle" >
                                        忌口与禁忌
                                    </Typography>
                                </Grid>
                                <Grid item xs >
                                    {this.state.taboos.map((item,index)=>{
                                        return (
                                            <Button variant="contained"   
                                                color={true===this.state.tabooactive[index]?'secondary':'primary'}
                                                key={index}
                                                onClick={this.addTaboo.bind(this,item,index)} 
                                                style={taTimeItem}>
                                                {item}
                                            </Button>
                                        )
                                    })}

                                </Grid>
                            </Grid>
                        </ListItem>
                    </List>
                </Dialog>
                <Grid container spacing={0} 
                    className="gridline paddingRight" 
                    onClick={this.onOpenPrescriptionDialog.bind(this)}>
                    <Grid item xs={6}>
                        <Typography variant="body2" color="inherit" className="usertitle" >
                            购药前处方是否可见
                        </Typography>
                    </Grid>
                    <Grid item xs={6} className="textRight">
                        <Button variant="contained"   color="inherit"  className="userinfo backfff">
                            {this.state.isShow}
                            <Icon >keyboard_arrow_right</Icon>
                        </Button>
                    </Grid>
                </Grid>
                <Divider />
                <Dialog
                    open={this.state.PrescriptionDialogIsShow}
                    keepMounted
                    aria-labelledby="alert-dialog-slide-title"
                    aria-describedby="alert-dialog-slide-description"
                    >
                    <DialogTitle >
                        {"购药前处方是否可见"}
                    </DialogTitle>
                    <Divider />
                    <List>
                        <ListItem button onClick={() => this.handlePrescriptionListItemClick('不可见')} style={paddingLeft30}>
                            <ListItemText primary="不可见" />
                        </ListItem>
                        <ListItem button onClick={() => this.handlePrescriptionListItemClick('可见')} style={paddingLeft30}>
                            <ListItemText primary="可见" />
                        </ListItem>
                    </List>
                </Dialog>

                 <TextField
                    className="fullwithinput"
                    // id="multiline-static"
                    label="请输入备注"
                    multiline
                    fullWidth
                    rows="3"
                    margin="normal"
                /> 
            
            </div>     
        );
    }
}

export default Proposal;
